<template>
  <div class="basicForm">
    <BasicForm @register="registerForm">
      <!-- 插槽（备注信息） -->
      <template #remarks="{ model, field }">
        <WangEditor
          v-model:value="model[field]"
          :bizKey="record.id"
          :bizType="'testDataChild_' + field"
          :height="300"
        />
      </template>
      <!-- 插槽（子表数据） -->
      <template #testDataChildList>
        <BasicTable @register="registerTestDataChildTable" @row-click="handleTestDataChildRowClick">
          <template #testDataChildUpload="{ record: childRecord }">
            <BasicUpload
              v-model:value="childRecord.dataMap"
              :bizKey="childRecord.id"
              :bizType="'testDataChild_file'"
              :uploadType="'all'"
              :loadTime="record.__t"
            />
          </template>
        </BasicTable>
        <a-button class="mt-2" @click="handleTestDataChildAdd" v-auth="'test:testData:edit'">
          <Icon icon="ant-design:plus-circle-outlined" /> {{ t('新增') }}
        </a-button>
      </template>
    </BasicForm>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsTestTestDataForm',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref, watch } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { Icon } from '/@/components/Icon';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { BasicTable, useTable } from '/@/components/Table';
  import { TestData } from '/@/api/test/testData';

  import { BasicUpload } from '/@/components/Upload';
  import { WangEditor } from '/@/components/WangEditor';
  import { formSchemas } from '/@/utils/custom';

  const props = defineProps({
    schemas: { type: Array, default: [] },
    data: { type: Object, default: {} },
    formConfig: { type: Object, default: {} },
  });
  let inputFormSchemas: FormSchema[] = [];
  watch(
    () => props,
    () => {
      inputFormSchemas = formSchemas(
        props.schemas,
        props.formConfig.formColNum,
        props.data,
      ) as FormSchema[];

      setTimeout(() => {
        zdy(props.data);
      }, 0);
    },
    { immediate: true },
  );

  const { t } = useI18n('test.testData');
  const record = ref<TestData>({} as TestData);
  const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm();
  async function zdy(data) {
    setProps({
      labelWidth: 120, // 控件前面的标签宽度
      schemas: inputFormSchemas, // 控件定义列表
      baseColProps: { lg: parseInt(props.formConfig.formColNum), md: 24 },
    });
    // console.log(data);
    await resetFields(); // 重置表单数据
    record.value = data;
    await setFieldsValue(data); // 设置字段值
    // setTestDataChildTableData(res); // 设置子表数据（没有子表可不写）
  }

  async function validateForm() {
    try {
      const data = await validate(); // 验证表单，并返回数据
      return data;
    } catch (error: any) {
      if (error && error.errorFields) {
        return false;
      }
    }
  }
  defineExpose({
    validateForm,
  });

  const [registerTestDataChildTable, testDataChildTable] = useTable({
    actionColumn: {
      width: 60,
      actions: (record: Recordable) => [
        {
          icon: 'ant-design:delete-outlined',
          color: 'error',
          popConfirm: {
            title: '是否确认删除',
            confirm: handleTestDataChildDelete.bind(this, record),
          },
          auth: 'test:testData:edit',
        },
      ],
    },
    rowKey: 'id',
    pagination: false,
    bordered: true,
    size: 'small',
    inset: true,
    // showTableSetting: true, //是否显示表格右上角3个默认按钮
  });

  function handleTestDataChildRowClick(record: Recordable) {
    record.onEdit?.(true, false);
  }

  // 添加编辑行，可指定初始数据
  function handleTestDataChildAdd() {
    testDataChildTable.insertTableDataRecord({
      id: new Date().getTime(),
      isNewRecord: true,
      editable: true,
    });
  }

  // // 删除编辑行方法
  function handleTestDataChildDelete(record: Recordable) {
    testDataChildTable.deleteTableDataRecord(record);
  }
</script>
<style>
  .col {
    color: red;
    font-weight: 100;
  }
</style>
